<template>
<div class="category">
    <h3>{{title}}分类</h3>
    <!-- 定义一个插槽用来占位，等待组件使用者进行填充 -->
    <!-- 具名插槽：给每个插槽定义名字，在使用的时候给元素指定插槽名字 -->
    <slot name="center">我是中间插槽，当使用者没有传递具体结构时，我会出现1</slot>
    <slot name="footer">我是底部插槽，当使用者没有传递具体结构时，我会出现2</slot>
    <!-- <ul>
        <li v-for="(item,index) in listData" :key="index">{{item}}</li>
    </ul> -->
</div>
</template>

<script>

export default {
    name:'Category',
    props:['title','listData']
}
</script>
<style >
.category{
    background-color: skyblue;
    width: 300px;
    height: 200px;
}
h3{
    text-align: center;
    background-color: orange;
}
/* 插槽中的样式在父组件和子组件都可以
    写在子组件：等元素传过来之后再添加样式，反之就是解析完的元素携带样式传过来
    img{
    width: 100%;
    height: 100%;
} */
</style>